<template>
  <div>
     <van-nav-bar :title="$route.meta.title"  @click-right="$router.push('/search')" >
      <template #right>
        <van-icon name="search" size="18"  />
      </template>
    </van-nav-bar>
    <div style="display:flex;">
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item v-for="(item,index) in list" :key="index"  :title="item.catename" />
      </van-sidebar>
      <van-grid :column-num="3" :gutter="5" style="flex:1" v-if="list.length">
        <van-grid-item v-for="(item,index) in list[activeKey].children" :key="index" :to="'/goodlist/'+item.id">
          <img :src="$HOST+item.img" width="50">
          {{item.catename}}
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getCateTree } from "@/common/request"
export default {
    data(){
        return{
           activeKey: 0,
           list:[]
        }
    },
    created(){
       this.getData()
    },
    methods:{
      async getData(){
          let res = await getCateTree();
          this.list = res.map(val=>{
             if(!val.children){
               val.children =[]
             }
             return val;
          });
      },
      onChange(index) {

      }
    },
    components:{}
}

</script>
<style scoped>
</style>